<template>
  <div>
    <el-card shadow="never" :body-style="{ padding: '0px' }">
      <div slot="header">
        <el-row :gutter="10" type="flex" justify="start">
          <!-- <el-col :span="9">
             <el-form :model='content'> 
               <el-form-item prop='name' label=''> 
                <el-input v-model='content.name' placeholder="试卷名称" clearable></el-input>
               </el-form-item> 
            </el-form> 
          </el-col> -->
          <el-col :span="35">
            <el-button type="primary" icon="el-icon-search" @click="query()">查询</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table :data="pager.content" style="width: 100%" stripe highlight-current-row v-loading="$store.state.loading" @selection-change="onSelectionChange"
      :default-sort= "{prop:'date',order:'descending'}" >
        <!-- <el-table-column prop="number" label="编号" width="65" align="center"></el-table-column> -->
        <el-table-column type="selection" width="65" align="center">
        </el-table-column>
        <el-table-column prop="paperName" label="试卷名称" ></el-table-column>
        <el-table-column prop="accountName" label="提交人" ></el-table-column>
        <el-table-column prop="score" label="分数" ></el-table-column>
        
        <!-- <el-table-column prop="allScore" label="总分数" sortable></el-table-column> -->
        <el-table-column label="状态" width="120" prop="isCorrected" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isCorrected == '2'" :type="'success'">已批改</el-tag>
            <el-tag v-if="scope.row.isCorrected == '1'" :type="'warning'">批改中</el-tag>
            <el-tag v-if="scope.row.isCorrected == '0'" :type="'danger'">未批改</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column type="expand">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="试题内容:" style="color:red">
                    <span>&nbsp;&nbsp;{{ props.row.content }}</span>
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column> -->
        <!-- <el-table-column prop="created.nickname" label="出题人" ></el-table-column> -->
        <el-table-column label="批卷日期" sortable  prop="updateDate" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left:5px">{{ scope.row.updateDate | moment('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="创建日期" sortable  prop="creationDate" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left:5px">{{ scope.row.creationDate | moment('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="操作" width="310" align="center">
            <template slot-scope="scope">
            <el-button size='medium' type="primary"  @click='markingPaper(scope.$index, scope.row)'>批改试卷</el-button>
            </template>
        </el-table-column> -->
      </el-table>
      <el-pagination 
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange" 
          :page-size="pager.pageable.pageSize" 
          :total="pager.totalElements" 
          class="pagination text-right" 
          :page-sizes="$store.state.paginationPageSizes" 
          :layout="$store.state.paginationLayout">
      </el-pagination>
    </el-card>

    <el-dialog title="批改试卷" :visible.sync="dialogVisible" >
        <!-- <el-form :label-position="'right'" label-width="80px" ref="userForm" :model="userForm">
        </el-form> -->
        <el-steps :active="active" finish-status="success">
            <!-- <el-step :title="temp.title" v-for="temp in questions" :key="temp.id"></el-step> -->
         <el-step :title='null' v-for="temp in userForm" :key="temp.id"></el-step>
        </el-steps>
        <el-button style="margin-top: 12px;margin-buttom: 12px;" @click="before">上一题</el-button>
        <el-button style="margin-top: 12px; float:right;margin-buttom: 12px;" @click="next11">下一题</el-button> 
        <el-carousel  ref="carousel" trigger="click" style="width:100%;height:609px" :autoplay="false" arrow="never" indicator-position="none">
      <el-carousel-item v-for="(item,index) in userForm" :key="item.id" style="height:609px">
        <h1>第{{ index+1 }}题:</h1>
         <el-input type='textarea' v-model="item.content" rows="4"  readonly></el-input>
        <h1 style="margin-top:30px">学生作答:</h1>
        <template>
              <div v-if="item.questionType.id==1" style="display:block;text-align:center;margin:0 auto">
                <el-radio v-model="item.submitAnswer" size="medium" label="A">A</el-radio>
                <el-radio v-model="item.submitAnswer" size="medium" label="B">B</el-radio>
                <el-radio v-model="item.submitAnswer" size="medium" label="C">C</el-radio>
                <el-radio v-model="item.submitAnswer" size="medium" label="D">D</el-radio>
              </div>
        </template>
        <div v-if="item.questionType.id==2" style="margin-top:30px">
            <el-input type='textarea' v-model="item.submitAnswer"  rows="4" readonly  clearable></el-input>
        </div>
        <h1 style="margin-top:30px">标准答案:</h1>
        <template>
              <div v-if="item.questionType.id==1" style="display:block;text-align:center;margin:0 auto">
                <el-radio v-model="item.answer" size="medium" label="A">A</el-radio>
                <el-radio v-model="item.answer" size="medium" label="B">B</el-radio>
                <el-radio v-model="item.answer" size="medium" label="C">C</el-radio>
                <el-radio v-model="item.answer" size="medium" label="D">D</el-radio>
              </div>
        </template>
        <div v-if="item.questionType.id==2" style="margin-top:30px">
            <el-input type='textarea' v-model="item.answer"  rows="4" style="color:red" readonly clearable></el-input>
        </div>
        <div style="margin-top:30px">
          <h1 style="display:inline;margin-right:40px">分数:</h1>
          <el-input-number type="text" placeholder="请给该题打分" :min="0" v-model="item.score"></el-input-number>
        </div>
      </el-carousel-item>
    </el-carousel>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeMarked">取 消</el-button>
        <el-button type="primary" @click="markPaper('userForm')">确 定</el-button>
      </div> 
    </el-dialog>
  </div>

  
</template>
<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
<script>
export default {
  data() {
    var validateUpdateName = (rule,value,callback) => {
      if(typeof(value) == "undefined" || value == "")
      {
        callback(new Error('请输入角色名称'));
      }else{
        if(value == this.roleName){
          callback();
        }else{
          this.$http.get("/api/accounts/isExit",{params:{'name':value}}).then(res => {
          if(res.data == true){
              callback();
          }else{
              callback(new Error('该角色名称已经存在'));
          }
        })
        }
      }
    }
    return {
        role:this.$store.state.role,

        active:1,
        nowScore:0,
        dropList:new Object(),
        radio:'1',
        radio1: '1',
    options:new Object(),
    options1: new Object(),
      total:'',
      size: '',
      content : new Object(),
      currentData: new Object(),
      userForm : new Array(),
      userForm_add : {title:"",answer:"",questionType:{id:"",name:""},created:{id:""}},
      deleteVisible: false,
      dialogVisible: false,
      dialogAddVisible: false,
      menuVisible: false,
      currentData:new Object() ,
      currentMenus : new Array() ,
      allRoles : new Array() ,
      tabledata : new Array() ,
      state: null,
      dateRange: null,
      roleName:"",
      userId : this.$store.state.userId ,
      selectedRows: [],
      bucketName: "public",
      pager: {pageable:[], totalElements: 0, content: [] },
      rules_add: {title:[{required:true,message:'请输入试题名称..',trigger:'blur'}]},
      rules_update: {title:[{required:true,message:'请输入试题名称..',trigger:'blur'}]}
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    query() {
        if(this.role == '教师')
        {
          this.$http.get("/api/Score/forTeacher",{params:{"accountId":this.userId,"page":this.pager.pageable.pageNumber,"size":this.pager.pageable.pageSize}}).then(res => {
          if(res.status == 200)
          {
            this.pager = res.data;
          }
        })
        }else{
          this.$http.get("/api/Score/",{params:{"accountId":this.userId,"page":this.pager.pageable.pageNumber,"size":this.pager.pageable.pageSize}}).then(res => {
          if(res.status == 200)
          {
            this.pager = res.data;
          }
        })
        }
    },
    onSelectionChange(rows) {
      this.selectedRows = rows.map(item => item.userId);
    },
    remove(index,row) {
      this.deleteVisible = true ;
      this.currentData = row;
    },
    handleSizeChange(val) {
        this.$http.get("/api/testPaper/",{params:{"size":val,"pageable":'1'}}).then(res => {
        this.pager = res.data;
      });
      },
    handleCurrentChange(val) {
        this.$http.get("/api/testPaper/",{params:{"page":val-1,"size":this.pager.pageable.pageSize,"pageable":'1'},}).then(res => {
        this.pager = res.data;
        });
      },
    markingPaper(index,row){
      if(row.isCorrected == '2')
      {
        return this.$notify({type:'error',title:'提示',message:'该试卷已被批改'}) ;
      }
       this.dialogVisible = true;
       this.userForm = row.questions;
      //  this.userForm = Object.assign({},row.questions) ; 
    }
    ,
    handleMenuSubmit() {
                let o = Object.assign([],this.currentMenus) .map(x=>{ return { id : x }; });
                let i = this.tabledata.findIndex( x=> x.id==this.currentData.id ) ;

                this.$http.put("/api/testPaper/"+this.currentData.id+"/questions", o)
                    .then(res=>{
                        this.currentData = res.data ;
                        this.tabledata.splice( i , 1 , this.currentData) ;
                        this.menuVisible = false ;
                        this.query();
                        this.$notify({type:'success',title:'成功',message:'添加试题成功'}) ;
                    })
                    .catch(error=>console.error(error));
            }
    ,next11() {
                if (this.active++ > 2) this.active = 1;
                this.$refs.carousel.next();
            },
    before() {
                if (this.active-- < 0) this.active = 1;
                this.$refs.carousel.prev();
            }
    ,closeMarked() {
      // this.active = 1;
      this.dialogVisible = false;
    },
    markPaper(userForm) {
      this.$http.put('/api/markPaper/',this.userForm).then( res => {
        if(res.status == 200)
        {
          this.userForm = new Array();
          this.$notify({type:'success',title:'成功',message:'批改成功'}) ;
          this.query();
          this.dialogVisible = false;
        }
      })
      .catch(error=>console.error(error));
    }
  },
};
</script>
